Ext.onReady(function()
{
    var store = new X.store.Json({
        url : '/usuario/ajax-listar',
        fields : [
            'codigoUsuario',
            'username',
            'nombrePerfil',
            'nombreDepartamento',
            'nombreUsuario',
            'titulo',
            'cargo',
            'apellido',
            'cedulaNro',
            'telefono',
            'email'
        ]
    });

    var grid = new X.grid.GridPanel({

        id       : 'grid',
        title    : 'Lista de Usuarios',
        height   : 500,
        width    : 1250,
        store    : store,

        columns:[
            new X.column.Text  ({header: 'Usuario',      dataIndex: 'username',           width: 110}),
            new X.column.Text  ({header: 'Perfil',       dataIndex: 'nombrePerfil',       width: 110}),
            new X.column.Text  ({header: 'Departamento', dataIndex: 'nombreDepartamento', width: 110}),
            new X.column.Text  ({header: 'Nombre',       dataIndex: 'nombreUsuario',      width: 120}),
            new X.column.Text  ({header: 'Apellido',     dataIndex: 'apellido',           width: 120}),
            new X.column.Text  ({header: 'Titulo',       dataIndex: 'titulo',           width: 120}),
            new X.column.Text  ({header: 'Cargo',        dataIndex: 'cargo',           width: 120}),
            new X.column.Number({header: 'Cédula',       dataIndex: 'cedulaNro',          width: 70}),
            new X.column.Text  ({header: 'Teléfono',     dataIndex: 'telefono',           width: 110}),
            new X.column.Text  ({header: 'Email',        dataIndex: 'email',              width: 200}),

            new X.column.Edit  ({editUrl    : '/usuario/editar',
                                 idColumn   : 'codigoUsuario'}),

            new X.column.Delete({deleteUrl  : '/usuario/ajax-eliminar',
                                 idColumn   : 'codigoUsuario',
                                 msgName    : 'usuario',
                                 msgNameCol : 'username'})
        ]
    });
    
    grid.getBottomToolbar().pageSize = 20;
});
